/**
 * 目标1：验证码登录
 * 1.1 在 utils/request.js 配置 axios 请求基地址
 * 1.2 收集手机号和验证码数据
 * 1.3 基于 axios 调用验证码登录接口
 * 1.4 使用 Bootstrap 的 Alert 警告框反馈结果给用户
 */

// 1.2 收集手机号和验证码数据   登录这个流程不需要复用，所以不需要封装函数
document.querySelector('.btn').addEventListener('click', () => {
  // 老样子 获取需要快速收集表单元素值的表单，然后使用插件的 serialize() 函数 快速收集表单元素值
  const form = document.querySelector('.login-form')
  // 表单的元素需要有 name 属性的值 作为 收集表单对象的属性名
  const data = serialize(form, { hash: true, empty: true })
  console.log(data) // 快速收集表单元素值功
  if (data.mobile.length !== 11) {
    myAlert(false, '手机号长度要11位')
    return
  }
  if (data.code.length !== 6) {
    myAlert(false, '验证码长度要6位')
    return
  }
  // 1.3 基于 axios 调用验证码登录接口
  axios({
    url: '/v1_0/authorizations',
    method: 'POST',
    data
  })
    // 1.4 使用 Bootstrap 的 Alert 警告框反馈结果给用户
    //  PS: 这个封装的弹窗插件是我们前面写过的 只是单独把他拿过来  myAlert() 函数  在 utils 文件夹下的 alert.js 里
    .then((result) => {
      // 用服务器返回的成功消息不明显 ok   我们自己传入一个 登录成功 好一点
      // myAlert(true, result.data.message)
      myAlert(true, '登录成功')
      console.log(result) // 这个 result 经过了 响应拦截器的处理 返回了需要的一些数据

      // 1.2 登录成功后，保存 token 令牌字符串到本地，并 1.5 秒后跳转到内容列表页面
      localStorage.setItem('token', result.data.token)
      // 定时器 延迟 1.5 秒后 执行跳转页面 这样可以让 aalert 警告框停留一会儿
      setTimeout(() => {
        // js代码是在 html文件运行的，所以是以 html 文件的相对路径为准
        location.href = '../content/index.html'
      }, 1500)
    })
    .catch((error) => {
      // error 是一个对象 用 dir 看的清除一点
      // console.dir(error)
      console.log(error.response.data.message)
      myAlert(false, error.response.data.message)
    })
})
